<template>
  <div>
    <el-row class="form_main">
      <el-col :span="8" :offset="8">
        <el-card class="box-card">
          <h1>注册</h1>
          <div class="card_main">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
              <el-form-item label="用户名" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkpassword">
                <el-input v-model="form.checkpassword"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="register('form')" :disabled="isDisable">注册</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
                <el-button type="text" @click="gologin">已有账号,前往登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import api from "~/api";

  export default {
    name: "register",
    data() {
      var checkname = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }
        let data = {
          name: this.form.name,
          password: this.form.password
        }
        api.nameIsExist(data).then(res => {
          let code = res.data.code;
          let msg = res.data.msg;
          if (code == 0) {
            callback(new Error(msg));
          } else {
            callback();
          }
        })
      };
      var checkPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      var checkPass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
          this.isDisable = false;
        }
      };

      return {
        isDisable: false,
        form: {
          name: '',
          password: '',
          checkpassword: '',
        },
        rules: {
          name: [
            {validator: checkname, trigger: 'blur'},
          ],
          password: [
            {validator: checkPass, trigger: 'blur'}
          ],
          checkpassword: [
            {validator: checkPass2, trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      register(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            let data = {
              name: this.form.name,
              password: this.form.password
            }
            api.register(data).then(res => {
              if (res.data.code == 1) {
                this.$notify.success({
                  title: '注册成功',
                  message: "即将跳转到登录页",
                  onClose: this.gologin
                })
              } else {
              }
            })
          } else {
            this.$notify.error({
              title: '注册失败',
              message: "请按要求输入",
              position: 'top-left'
            });
            return false;
          }
        });
      },
      gologin() {
        this.$router.push("/user/login")
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

  }
</script>

<style scoped>
  .card_main {
    margin-top: 30px;
    margin-right: 20px;
  }
</style>
